<template>
  <div id="invoicepdf" class="dashboard-container body-min-width">
    <h2 class="head-big-title">Cipta Pesanan Pembelian</h2>
    <Pathnavigation style="margin-left: 3%;"></Pathnavigation>
    <div class="card-div">
      <el-card shadow="always" :body-style="{ padding: '15px 0 25px 20px' }">
        <el-form
          :inline="true"
          :model="newOrderData"
          label-position="top"
          size="medium"
          label-width="110px">
          <el-form-item label="Dealer Utama" style="width: 45%;margin-right: 5%;">
            <el-select v-model="dealerInfo" @change="getDealerInfo" value-key="id" placeholder="Master Dealer">
              <el-option v-for="(item,index) in dealerLists" :key="index" @input="changeNew($event)" :label="item.dealerName" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="Tarikh Pesanan" style="width: 45%;">
            <el-date-picker
              v-model="newOrderData.time"
              class="input-width"
              type="datetime"
              style="width: 66%;"
              placeholder="Tarikh">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="Alamat Bil" style="width: 45%;margin-right: 5%;">
            <p class="two-info">
              <svg-icon icon-class="ico_user" style="font-size: 18px;margin-right: 6px;"></svg-icon>
              {{ detailData.billingAddr.name }}
            </p>
            <p class="two-info">
              <svg-icon icon-class="ico_phone" style="font-size: 18px;margin-right: 6px;"></svg-icon>
              {{ detailData.billingAddr.phoneNumber}}</p>
            <p class="two-info">
              <svg-icon icon-class="ico_address" style="font-size: 18px;margin-right: 6px;"></svg-icon>
              {{ detailData.billingAddr.streetAddress + ', ' +detailData.billingAddr.regionalAddress + ', ' + detailData.billingAddr.postCode + ', ' + detailData.billingAddr.city + ', ' + detailData.billingAddr.region}}</p>
          </el-form-item>
          <el-form-item label="Alamat Penghantaran" style="width: 45%;margin-right: 5%;">
            <p class="two-info">
              <svg-icon icon-class="ico_user" style="font-size: 18px;margin-right: 6px;"></svg-icon>
              {{detailData.shopAddr.name}}</p>
            <p class="two-info">
              <svg-icon icon-class="ico_phone" style="font-size: 18px;margin-right: 6px;"></svg-icon>
              {{detailData.shopAddr.phoneNumber}}</p>
            <p class="two-info">
              <svg-icon icon-class="ico_address" style="font-size: 18px;margin-right: 6px;"></svg-icon>
              {{detailData.shopAddr.streetAddress + ', ' +detailData.shopAddr.regionalAddress + ', ' + detailData.shopAddr.postCode + ', ' + detailData.shopAddr.city + ', ' + detailData.shopAddr.region}}</p>
            <p class="two-info"><i class="el-icon-s-comment"></i>Nota Penghantaran Sini</p>
          </el-form-item>

        </el-form>
        <h2 class="head-big-title">Produk
          <el-button
            round
            type="warning"
            size="mini"
            icon="el-icon-plus"
            style="float: right;margin-right: 5%"
            @click="addProducts">Tambah Produk</el-button>
        </h2>
        <el-table
          :data="products"
          style="width: 92%;margin: 0;">
          <el-table-column label="" width="100">
            <template slot-scope="scope">
              <img
                v-if="scope.row.picUrl"
                style="width: 64px; height: 64px"
                :src="picbase + scope.row.picUrl"
                @click="handleEdit(scope.row)"/>
              <img src="">
            </template>
          </el-table-column>
          <el-table-column prop="productId" align="center" label="Nama Produk" width="300">
            <template slot-scope="scope">
              <el-select v-model="scope.row.productId" placeholder="Nama" @change="chooseProdct(scope.$index, scope.row)">
                <el-option v-for="(item,index) in productList" :key="index" :label="item.productName" :value="item.productId"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="center" label="Kuantiti" width="200">
            <template slot-scope="scope">
              <el-input-number :min="scope.row.moq" v-model="scope.row.quantity" @change="changeNumber(scope.$index, scope.row)"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column prop="money" align="center" label="Harga">
            <template slot-scope="scope">
              {{$formatMoneyStr(scope.row.money)}} (1
              {{scope.row.unit +')'}}
            </template>
          </el-table-column>
          <el-table-column prop="total" label="Jumlah">
            <template slot-scope="scope">
              {{$formatMoneyStr(scope.row.total)}}
            </template>
          </el-table-column>
          <el-table-column label="Tindakan" width="100" align="center">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-delete"
                @click="reduceCardCount(scope.row)"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="width: 56%;display: inline-block;float: left;margin: 10px 0 0 0" class="Note-div">
          <h2 style="font-size: 18px;text-align: left;">Nota Penghantaran</h2>
          <el-input
            type="textarea"
            :rows="5"
            @input="changeNew($event)"
            placeholder="Nota Penghantaran Sini"
            v-model="newOrderData.orderMsg.buyerMsg">
          </el-input>
        </div>
        <div class="total-sum-div">
          <p class="middle-info"><label>Jumlah Kecil: </label>{{ totalData.total?$formatMoneyStr(totalData.total):'RM 0.00' }}</p>
          <p class="middle-info"><label>Jumlah Penghantaran: </label>RM 0.00</p>
          <p class="middle-info"><label>Penyesuaian: </label>RM 0.00</p>
          <el-divider></el-divider>
          <p class="middle-info"><label>Jumlah Pesanan: </label>{{ totalData.total?$formatMoneyStr(totalData.total):'RM 0.00' }}</p>
          <div>
            <el-button type="primary" @click="newOrderClick" style="float: right;margin: 20px 66px 20px 100px;">Cipta PO</el-button>
            <el-button @click="$router.push({path:'/Orders/Query'})" style="float: right;margin-top: 20px;">Balik</el-button>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { admin_addOrderApi, queryProductApi, queryDealerApi, dealer_query_oneApi } from '@/api/user'

export default {
  name: 'Report',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  data() {
    return {
      productList: [],
      products: [],
      tableDatab: [],
      dealerData: {},
      dealerLists: [],
      newOrderData: {
        orderMsg: {}
      },
      totalData: {},
      dealerInfo: {},
      detailData: {
        shopAddr: {
          name: 'Luqman bin Muhammad Asmin',
          phoneNumber: '+6016 888 8888',
          streetAddress: 'No.66, Block Crystal, Jalan 1/19,40150, Petaling Jaya, Selangor,Malaysia'
        },
        billingAddr: {
          name: 'Luqman bin Muhammad Asmin',
          phoneNumber: '+6016 888 8888',
          streetAddress: 'No.66, Block Crystal, Jalan 1/19,40150, Petaling Jaya, Selangor,Malaysia'
        }
      },
      orderChart1: '',
      orderChart2: '',
      orderChart3: ''
    }
  },
  created() {
    this.newOrderData.time = this.$now
    this.getProductList()
  },
  mounted() {
    this.getDealerList()
  },
  methods: {
    changeNew() {
      this.$forceUpdate()
    },
    getCompanyInfo() {
      dealer_query_oneApi().then(res => {
        this.dealerData = res.data
      }).catch(err => {
        this.$message.error('ERROR')
        this.dealerData = []
        console.log(err)
      })
    },
    newOrderClick() {
      this.newOrderData.detail = this.products
      admin_addOrderApi(this.newOrderData).then(res => {
        this.$message({
          message: 'success',
          type: 'success'
        })
        this.$router.push({ path: '/Orders/Query' })
      }).catch(err => {
        console.log(err)
      })
    }, // 得到数据表格
    addProducts() {
      this.products.push({
        'quantity': 1,
        'money': 0,
        'unit': '*',
        'total': 0
      })
    },
    getDealerList() {
      queryDealerApi({ pageNum: 100, pageIndex: 1 }).then(res => {
        this.dealerLists = res.data.records
      }).catch(err => {
        console.log(err)
      })
    },
    chooseProdct(index, item) {
      this.products.splice(index, 0)
      // this.products.splice(index, 1)
      for (let i = 0; i < this.productList.length; i++) {
        if (this.productList[i].productId == item.productId) {
          item.money = this.productList[i].priceMasterDealer * this.productList[i].productSku.exchangeNum
          item.picUrl = this.productList[i].picUrl
          item.unit = this.productList[i].productSku.unit
          item.moq = this.productList[i].productSku.moq
          item.quantity = this.productList[i].productSku.moq
          break
        }
      }
      item.total = item.money * item.quantity
      this.products.splice(index, 1, item)
      this.getTableTotal()
    },
    getDealerInfo(item) {
      // (newOrderData.dealerId)
      this.detailData = item
      this.newOrderData.dealerId = item.dealerId
    },
    changeNumber(index, item) {
      this.products.splice(index, 0)
      // this.products.splice(index, 1)
      item.total = parseInt(item.quantity) * item.money
      this.products.splice(index, 1, item)
      this.getTableTotal()
    },
    getTableTotal() {
      if (this.products.length) {
        if (this.products.length > 0) {
          this.totalData.total = 0
          for (let i = 0; i < this.products.length; i++) {
            this.totalData.total = this.totalData.total + this.products[i].total
          }
        }
      }
    },
    getProductList() {
      queryProductApi({ pageNum: 100, pageIndex: 1 }).then(res => {
        this.productList = res.data.records
      }).catch(err => {
        this.productList = []
        console.log(err)
      })
    },
    reduceCardCount(item) {
      var index = this.products.indexOf(item)
      if (index !== -1) {
        this.products.splice(index, 1)
      }
    },
    handleDel() {

    },
    handleEdit() {

    }
  }
}

</script>

<style lang="scss" scoped>
  .dashboard {
    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }
  .head-big-title{
    text-align: left;
    font-size: 20px;
    margin: 20px 0 0 3%;
  }
  .big-title{
    text-align: left;
    font-size: 16px;
    margin: 0;
    clear: both;
  }
  .dashboard-container{
    margin-top: 20px;
    text-align: center;
  }

  .two-card-not + .two-card-not{
    margin-left: 2%;
  }
  .two-card-a{
    width: 65%;
  }
  .two-card-b{
    width: 33%;
  }
  .total-sum-div{
    padding: 20px;
    text-align: left;
    width: 40%;float: right;margin-right: 4%;
  }
  .total-sum-div .middle-info label{
    width: 188px;
    display: inline-block;
  }
  .total-sum-div .middle-info{
    margin-left: 66px;
    line-height: 24px;
  }
  .two-card-not{
    text-align: left;
    float: left;

    .title{
      display: block;font-size: 15px;margin: 0;
    }
    .count{
      font-size: 19px;margin: 6px 0 0 0;color: #ffe140;
    }
  }
  .two-card + .two-card{
    margin-left: 2%;
  }

  .two-card{
    width: 49%;
    text-align: left;
    float: left;

    .title{
      display: block;font-size: 15px;margin: 0;
    }
    .count{
      font-size: 19px;margin: 6px 0 0 0;color: #ffe140;
    }
  }
  .one-card{
    width: 100%;
    text-align: left;
    float: left;

    .title{
      display: block;font-size: 19px;margin: 0;
    }
    .count{
      font-size: 19px;margin: 6px 0 0 0;color: #ffe140;
    }
  }
  .last-days-order{
    width: 92%;
    margin: 0 4%;
    border-radius: 20px;
  }
  .last-days-order .erchart-div{
    height:278px;display: inline-block;background-color: white;border-radius: 10px;
  }
  .header-div{
    float: right;
    text-align: center;
    margin-right: 64px;
    position: relative;
    bottom: 21px;
  }
  .header-div p{
    margin: 10px 0;
  }
  .header-div img{
    width: 64px;
    height: 64px;
  }
  .head-info-three{
    width: 28%;
    margin-right: 20px;
    margin-bottom: 15px;
    display: inline;
    float: left;
  }
  .card-div{
    width: 94%;text-align: left;margin: 0 3% 66px 3%
  }
  .two-info{
    width: 45%;
    margin-right: 5%;
    margin-bottom: 20px;
    margin-top: 0;
    display: inline-block;
    line-height: 18px;
    word-break: normal;
  }
  .two-info i{
    margin-right: 15px;
    color: #1482f0;
  }
</style>
